<template>
	<view class="text2 " v-for="v in line" key="v.id" @click="getid(v.id)">
			<view class="title">
				<text>{{v.articleTitle}}</text>
			</view>
			<view class="smallTitle">
				<text>{{v.text}}</text>
			</view>
			<image :src="v.coverUrl"></image>
			<view class="bottom">
				<view class="bottomL">
					<text style="margin-right: 30rpx;">{{v.likeNum}}赞</text>
					<text>{{v.collectNum}}收藏</text>
				</view>
				<view class="bottomR">{{v.uploadTime}}</view>
			</view>	
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	const {
		line
	} = defineProps(['line']);
	let getid=(id)=>{
		console.log(id);
		uni.navigateTo({
			url: `/pages/Article-Details/Article-Details?id=${id}`
		});
	}
</script>

<style lang="less">
	.text2 {
		padding: 26rpx 20rpx;
		margin: 60rpx 38rpx;
		width: 636rpx;
		height: 526rpx;
		// position: absolute;
		// left: 0;
		// top: 120px;
		box-shadow: 0 0 10rpx #F2F2F2;

		.title {
			font-size: 30rpx;
			font-weight: 700;
			margin-bottom: 32rpx;
		}

		.smallTitle {
			// width: 588rpx;
			// height: 78rpx;
			font-size: 22rpx;
			color: #c6c5c5;
			margin-bottom: 26rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			/* 文本不换行 */
			white-space: nowrap;
		}

		image {
			width: 630rpx;
			height: 316rpx;
			margin-bottom: 14rpx;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			line-height: 24rpx;
			width: 644rpx;
			height: 24rpx;
			color: #cccbcb;
			margin-bottom: 42rpx;
		}
	}
</style>
